<template>
   
    <el-row :gutter="5">
     <el-col :span="10"><div class="grid-content ep-bg-purple left" >
         <img src="../../public/img/back.png" alt="" class="back">
     </div>
     </el-col>
     <el-col :span="14"><div class="grid-content ep-bg-purple right">
      
 <div class="form">    
    
    <h1 class="title">饿了么后台管理系统</h1>
        <!-- 登录表单 -->
        <el-form
     :label-position="labelPosition"
     label-width="100px"
     :model="form"
     style="max-width: 460px"
     :rules="rules"
   >
     <el-form-item prop="username">
       <el-input v-model="form.username" placeholder="请输入用户名" >
        <template #prefix>
          <el-icon class="el-input__icon"><el-icon><User /></el-icon></el-icon>
        </template>
       </el-input>
     </el-form-item>
     
     <el-form-item prop="password">
       <el-input v-model="form.password" placeholder="请输入密码" type="password" show-password>
        <template #prefix>
          <el-icon class="el-input__icon"><el-icon><Lock /></el-icon></el-icon>
        </template>
       </el-input>
     </el-form-item>
     <el-form-item prop="code">
       <el-input v-model="form.code" placeholder="请输入验证码">
        <template #prefix>
          <el-icon class="el-input__icon"><el-icon><Aim /></el-icon></el-icon>
        </template>
       </el-input>
     </el-form-item>
     <div class="code" @click="changeCode"><label>{{ code }}</label></div>

     <el-form-item>
      <el-button type="primary" @click="login" class="button">登 录</el-button>
    </el-form-item>
   </el-form>
 </div>
 
     </div></el-col>
   </el-row>
 
 </template>
 
 <script setup lang="ts">
 import {reactive, ref ,onMounted ,nextTick} from 'vue'
 import {useRouter} from 'vue-router'
 import { useStore } from 'vuex'
//  import type { FormProps } from 'element-plus'
import type { FormProps } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {ElMessage} from 'element-plus'
import userinfoApi from '@/api/userinfo' 
// import {generateRandomNumber} from '../utils/codeutil'
//引入 请求
import LoginApi from  "@/api/login"



 const router = useRouter()
 const store = useStore()

 const labelPosition = ref<FormProps['labelPosition']>('right')


 const loginUser =ref({
    username:'',password:'',phone:'',userImg:'',role:''
})
const form = ref<RuleForm>({
  username: '',
  password: '',
  code: '',
})

 const login =async ()=>{
    const data  = await  LoginApi.login(form.value)
    if(data.code!=200){
      ElMessage({message:data.data,type:'error'})
        //更新验证码
        changeCode()
    }else{
      
      if(data.data.user.status=='启用'){
         //存入store中
        store.state.userinfo.username = data.data.user.username
        store.state.userinfo.password = data.data.user.password
        store.state.userinfo.phone = data.data.user.phone
        store.state.userinfo.userimg = data.data.user.userImg
        store.state.userinfo.role = data.data.user.role
        store.state.userinfo.name = data.data.user.name
        store.state.userinfo.status = data.data.user.status
        //将token存入store中
        localStorage.setItem('token',data.data.token)
        //跳转到首页
        ElMessage({message:"登录成功！",type:'success'})
        router.push("/home")
      }else{
        ElMessage({message:"账号已被禁用！请联系管理员",type:"warning"})
      }
     
    }
 }



// async function getUserInfo(){
//       var data = await userinfoApi.getUserInfo()
//       loginUser.value.username = data.username;
//       loginUser.value.password = data.password;
//       loginUser.value.phone = data.phone;
//       loginUser.value.userImg = data.userImg;
//       loginUser.value.role = data.role;

//       if(form.value.username != loginUser.value.username){
//         UserNameErrMsg()
//         code.value = generateRandomNumber()
//         return;
//       }
//       if(form.value.password != loginUser.value.password){
//         PasswordErrMsg()
//         code.value = generateRandomNumber()
//         return;
//       }
//       if(form.value.code != code.value){
//         CodeErrMsg()
//         code.value = generateRandomNumber()
//         return;
//       }

//       if( form.value.username  == loginUser.value.username &&
//           form.value.password == loginUser.value.password && form.value.code == code.value){
//          //存入localStorele
//          localStorage.setItem('username',form.value.username)
//          code.value = generateRandomNumber()
//          loginSuccessMsg()
//          router.push('/home')
//     }
    
    //每次登录一次，验证码就要跟换一次
    // code.value = generateRandomNumber()

//}



 interface RuleForm {
  username:string,
  password:string,
  code:string
}

// const formSize = ref('default')
//  const ruleFormRef = ref<FormInstance>()

//验证码
const code = ref()
onMounted(async ()=>{
  try{
 //获取验证码
   var data =  await LoginApi.getCheckCode()
   if(data.code === 200){
     code.value =  data.data;
   }else{
    CodeErrMsg()
   }
  }catch(e){
    //ElMessage({message:'后端接口异常',type:'error'})
  }
  
  
})
//点击更换验证码
const changeCode=async ()=>{
  //获取验证码
  var data =  await LoginApi.getCheckCode()
   if(data.code === 200){
     code.value =  data.data;
   }else{
     CodeErrMsg()
   }
  
}


const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  code:[ 
    { required: true, message: '请输入验证码',trigger: 'blur'}
  ]
 
})


const loginSuccessMsg = ()=> {ElMessage({message:'登录成功',type:'success'})}

const UserNameErrMsg = ()=> {ElMessage({message:'用户名不存在',type:'error'})}
const PasswordErrMsg = ()=> {ElMessage({message:'密码错误',type:'error'})}
const CodeErrMsg = ()=> {ElMessage({message:'验证码错误',type:'error'})}

 </script>
 
 <style lang="less" scoped>
 
 
 
 .el-row {
   margin-bottom: 20px;
 }
 .el-row:last-child {
   margin-bottom: 0;
 }
 .el-col {
   border-radius: 4px;
 }
 
 .grid-content {
    // border: 1px solid;
    margin-top: 10px;
   border-radius: 4px;
   min-height: 36px;
   height: 630px;
   background-color: rgb(255, 255, 255);
 }
 
 .el-input{
    height: 40px;
    width: 400px;
 }
 
 .back{
     width:630px;
     height: 630px;
 }

.left{
    // border: 1px solid rgb(0, 0, 0);
}
.right{
    border-left: 1px solid rgb(215, 212, 212);
}

.form{
    position: absolute;
    top: 200px;
    right: 300px;
    .title{
      
      position: absolute;
      bottom: 300px;
      right: 60px;
    }
    .button{
        border-radius: 23px;
        width: 300px;
        height: 50px;
        font-size: 18px;
        margin-left: 30px;
    }
}

//  表单样式
//验证码
.code{

  position: absolute;
  left: 500px;
  bottom: 90px;
  width:100px;
  height: 30px;
  background-color: rgb(230, 227, 224);
  text-align: center;
  line-height: 30px;
}
.code:hover{
  background-color: rgb(176, 173, 173);
}
 
 </style>